<template>
  <div class="main"  style="margin: 0 200px; padding: 10px;">
    <!-- {{ this.notice.ggnr }} -->
    <div ref="main" style="margin-bottom: 50px;"></div>
    <!-- <router-link :to="param">点击查看标的列表</router-link> -->
    <div class="top">
        <img :src=" auction.fm "/>
        <div class="text">
            <div class="title">{{ auction.pmhmc }}</div>
            <div class="company">拍卖企业：天津鑫容一诺拍卖有限公司</div>
            <div class="phone">联系电话：13312345678</div>
            <div class="time">开始时间：{{ auction.kpsj }}</div>
            <div class="button">
                <el-button type="primary" @click="toLotList()">查看标的列表</el-button>
            </div>
            
            <div class="desc">
                <div class="lotNumber">标的数量</div>
                <div class="watchingNumber">围观次数</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { getNotice } from '@/api/notice/notice';
import { getPmhInfo } from '@/api/lotList/lotList';
export default {
    data(){
        return{
            notice: {
                ggnr: '',

            },
            param: '/lotList?pmhbh=',
            auction: {},
        }
    },
    props:{

    },
    methods:{
        getData(){
            getNotice(this.query).then((res) => {
                if(res){
                    console.log('公告',res);
                    this.notice = res.data[0];
                    this.$refs.main.innerHTML = this.notice.ggnr;
                    this.param = this.param + 'pmh' + this.notice.pmggbh.substring(4);
                    this.getPmh();
                }
            })
        },
        getPmh(){
            getPmhInfo('pmh' + this.notice.pmggbh.substring(4)).then((res) => {
                if(res){
                    this.auction = res.data;
                    console.log('auction',this.auction);
                }
            });
        },
        toLotList(){
            this.$router.push({
                path: '/lotList',
                query: {
                    pmhbh: 'pmh' + this.notice.pmggbh.substring(4)
                }
            });
        }
    },
    mounted(){
        this.query = this.$route.query.pmggbh;
        // console.log(this.query);
        this.getData();
    },
}
</script>

<style scoped lang="less">
/deep/ p img{
    width: 300px !important;
    height: 400px!important;
}
/deep/.ql-video{
    width: 100%;
    height: 500px;
}
.top{
    width: 100%;
    display: flex;
}
.top img{
    width: 70%;
    height: 300px;
}
.top .text{
    background-color: #fff;
    width: 26%;
    margin-left: 10px;
    padding: 10px;
}
.top .text .title, .time{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0;
}
.top .text .company, .phone{
    font-size: 14px;
    color: #666;
}
.top .text .button{
    text-align: center;
}
.top .text .desc{
    display: flex;
    justify-content: space-around;
    padding: 10px;
    margin-top: 10%;
    color: #666;
}
</style>